<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/echarts.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <header>
        <div id="headerbox" class="page">
            <div id="header-left">
                <a class="logo"  href="javascript:;">LOGO</a>
            </div>
            <div id="header-right">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;" id="header-right-logout">Log Out</a>
            </div>
        </div>
    </header>

    <!-- 导航 -->
    <main class="page">
        <div id="main-top">
            <div id="main-top-left">
                <div>Audience Overview</div>
                <span>Roseville,CA</span>
            </div>
            <div id="main-top-right">
                <ul>
                    <li><a href="javascript:;">DASHBOARD</a></li>
                    <li><a href="javascript:;">PROJECTS</a></li>
                    <li><a href="javascript:;">CALENDAR</a></li>
                    <li><a href="javascript:;">MAILBOX</a></li>
                    <li><a href="javascript:;">SETTINGS</a></li>
                </ul>
                <div id="main-top-right-bar"></div>
            </div>
        </div>
        <!-- 第一行 -->
        <div id="main-row1" class="towcol row">
            <div id="main-row1-right">
                <div id="main-row1-slideshow">
                    <div id="main-row1-slideshow-left" class="swtichover"><</div>
                    <div id="main-row1-slideshow-right" class="swtichover">></div>
                    <div id="main-row1-slideshow-dot"><ul></ul></div>
                    <ul id="main-row1-slideshow-pictures">
                        <li><img src="image/p3.png" alt=""></li>
                        <li><img src="image/p3.png" alt=""></li>
                        <li><img src="image/p3.png" alt=""></li>
                        <li><img src="image/p3.png" alt=""></li>
                        <li><img src="image/p3.png" alt=""></li>
                        <!--  -->
                    </ul>
                </div>
                
            </div>
            <div id="main-row1-reqbox">
                <div id="main-row1-reqbox-top">
                    <div id="main-row1-reqbox-top-title">Support Requests</div>
                    <button>View All</button>
                </div>
                <div id="main-row1-reqbox-top-tb">
                    <table>
                        <tr>
                            <th>TIME</th>
                            <th>USER NAME</th>
                            <th>STATUS</th>
                        </tr>
                        <tr>
                            <td>9:45pm</td>
                            <td>info@design.com</td>
                            <td><button>Solved</button></td>
                        </tr>
                        <tr>
                            <td>9:45pm</td>
                            <td>info@design.com</td>
                            <td><button>Solved</button></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 第二行 曲线图 -->
        <div id="main-row2" class="row">
            <div id="main-row2-curve"></div>
        </div>
        <!-- 第三行 -->
        <div id="main-row3" class="towcol row">
            <div id="main-row3-pie"></div>
            <div id="main-row3-bar"></div>
        </div>
    </main>

    <footer>
        <div id="footerbox">
            <div class="page">
                <div>
                    <a class="logo" href="javascript:;">LOGO</a>
                </div>
                <ul>
                    <li><a href="javascript:;">NEWS</a></li>
                    <li><a href="javascript:;">CHANNELS</a></li>
                    <li><a href="javascript:;">OVERVIEW</a></li>
                    <li><a href="javascript:;">TIMELINE</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">SPORT</a></li>
                    <li><a href="javascript:;">CULTURE</a></li>
                    <li><a href="javascript:;">NATURE</a></li>
                    <li><a href="javascript:;">MUSIC</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">WEATHER</a></li>
                    <li><a href="javascript:;">AUTOS</a></li>
                    <li><a href="javascript:;">LOCAL</a></li>
                    <li><a href="javascript:;">SHOP</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">FUTURE</a></li>
                    <li><a href="javascript:;">FOOD</a></li>
                    <li><a href="javascript:;">EARTH</a></li>
                    <li><a href="javascript:;">TV</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">TRAVEL</a></li>
                    <li><a href="javascript:;">RADIO</a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>